<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>vue-1</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!-- <script type="text/javascript" src="vue.js"></script> -->

</head>

<body>

	<div id="app">
		<p>name: {{ name }}</p>
		<p>greet: {{ greet("after")}}</p>
		<a v-bind:href="website">www.baidu.com</a>
		<input type="text" v-bind:value="name">
		<!-- 把字符串插入到HTML当前的标签中
			不加 v-html 会原样输出 -->
		<p v-html="websiteTag">{{ websiteTag }}</p>
	</div>


	<!-- 注意要在后面 -->
	<script type="text/javascript">
		<!--
		new Vue({
			el: "#app",
			data: {  // 在组件中 ==> data() {return {}}
				name: "zhoufei",
				job: "web开发",
				website: "https://www.baidu.com",
				websiteTag: "<a href='https://www.baidu.com'>www.baidu.com标签</a>"
			},
			methods: {
				greet: function (time) {
					return "Good " + time + this.name + "!";
				}
			}
		});
		//-->
		/**
		 * el: element 需要获取的元素， 一定是HTML中的根容器元素
		 * data: 用于数据的存储
		 * methods: 用于存储各种方法
		 * data-binding: 给属性绑定对应的值
		 */
		// ===================实例生命周期钩子==============

		// 每个 Vue 实例在被创建时都要经过一系列的初始化过程—— 例如， 需要设置数据监听、
		// 编译模板、 将实例挂载到 DOM 并在数据变化时更新 DOM 等。 同时在这个过程中也会运行
		// 一些叫做生命周期钩子的函数， 这给了用户在不同阶段添加自己的代码的机会。
		// 比如 created 钩子可以用来在一个实例被创建之后执行代码：
		// new Vue({
		//         data: {
		//             a: 1
		//         },
		//         created: function() {
		//             // `this` 指向 vm 实例
		//             console.log('a is: ' + this.a)
		//         }
		//     })
		// => "a is: 1"
	</script>

</body>

</html>